'use client';

import { useState } from 'react';
import SidebarTabs, { SidebarTab } from '@/components/SideBarTabs';
import ChatMainLayout from '@/components/ChatMainLayout';
import MomentList from '@/components/MomentList';
import FriendLayout from '@/components/FriendLayout';
import { useConversation } from '@/context/conversationContext';
import ProfilePage from '@/components/ProfilePage';

interface Friend {
  id: string;
  username: string;
  avatar: string | null;
}

export default function HomePage() {
  // 默认chat
  const [tab, setTab] = useState<SidebarTab>('chat');
  const { startConversation } = useConversation();

  const handleTabChange = (t: SidebarTab) => {
    setTab(t);
  };

  const handleStartChat = (friend: Friend) => {
    startConversation(friend);
    setTab('chat');
  }

  return (
    <div className="flex flex-grow w-full h-full">
      <SidebarTabs activeTab={tab} onTabChange={handleTabChange} />
      <div className="flex-1 overflow-auto">
        {tab === 'chat' && <ChatMainLayout />}
        {tab === 'contacts' && <FriendLayout onStartChat={handleStartChat} />}
        {tab === 'moments' && <MomentList />}
        {tab === 'settings' && <ProfilePage />}
      </div>
    </div>
  );
}

